import { Outlet, useNavigate } from 'react-router-dom';
import { Menu, Dropdown, Space, Avatar } from 'antd';
import type { MenuProps } from 'antd';
import { Router } from '../../interface';
import '../css/Home.css'


export default function Home(props :any) {
  const navigator = useNavigate()
  
  const userInfo  = JSON.parse(sessionStorage.getItem('userInfo') as string)  
  const data = JSON.parse(sessionStorage.getItem('routerData') as string)
  const menuItem = data.map((item: Router.RouterProp) => ({
    key: item.path,
    label: item.title,
    son: item.children
  }))

  const getPath = () => {
    let path = window.location.pathname
    let pathArr = path.split('/')
    if (pathArr.length <= 3) {
      return path
    }
    path = `/${pathArr[1]}/${pathArr[2]}`

    return path
  }
  const menuClick = (e: { key: string }) => {
    let arr = menuItem.filter((item: any) => {
      if (item.key === e.key) return true
      return false
    })
    if (arr[0].son) {
      navigator(arr[0].son[0].path)
    } else {
      navigator(e.key)
    }
  }

  let testSrc = 'https://img0.baidu.com/it/u=981218435,2998857702&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675'

  let type = JSON.parse(sessionStorage.getItem('userInfo') as string)
  if(type.roleName == '管理员'){
    testSrc = 'https://img0.baidu.com/it/u=981218435,2998857702&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675'
  }else if(type.roleName == '财务'){
    testSrc = 'https://tse2-mm.cn.bing.net/th/id/OIP-C.CPB0ZKZz1HAi4Tvc-23PaAAAAA?pid=ImgDet&rs=1'
  }

  // 退出登录
  const loginOut = () => {
    sessionStorage.clear()
    navigator('/login')
  }
  const testA = () => {
    navigator('/home/index/accountsetting')
  }
  const items: MenuProps['items'] = [
    {
      label: <span onClick={testA}>个人中心</span>,
      key: '0',
    },
    {
      type: 'divider',
    },
    {
      label: <span onClick={loginOut}>退出</span>,
      key: '3',
    },
  ];

  return (
    <div className='Home'>
      <div className='header'>
        <div className='left'>SaS商城管理后台</div>
        <div className='center'>
          <Menu theme="dark" mode="horizontal" selectedKeys={[getPath()]} items={menuItem} onClick={menuClick} />
        </div>
        <div className='right'>
          <Dropdown menu={{ items }} trigger={['click']}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <Avatar src={<img src={testSrc} alt="avatar" />}></Avatar>
              </Space>
            </a>
          </Dropdown>
          <span style={{ marginLeft: '6px' }}>{userInfo.emplName}</span>
        </div>
      </div>
      <div className='content'>
        <Outlet></Outlet>
      </div>
    </div>
  );
}
